<!-- 文章列表 -->

<script setup lang="ts">
import { ref,onMounted } from "vue"
import List from "./components/List.vue"
import axios from 'axios'
// .d.ts
import type {ChannelRes , ChannelItem} from "./types/data.d"

// 核心步骤
// 声明响应式列表数据 ( ref + TS )
const channelList = ref<ChannelItem[]>([])
// 2. 获取列表数据 ( axios )

const getList = async ()=>{
  const res = await axios.request<ChannelRes>({
    url:'https://apifoxmock.com/m1/3318905-2799336-default/channels',
    method: 'GET'
  })

  console.log(res);
  

  // 3. 渲染列表数据 (赋值给响应式列表 , 渲染到模版)

  channelList.value = res.data.data.channels
}
onMounted(()=> getList())



// 频道id
const channelId = ref(0)
const tabChange = (id:number)=>{
  console.log('id',id);

  channelId.value = id
  
}
</script>

<template>
  <!-- tab切换 -->
  <van-tabs onchange="tabChange">
    <van-tab v-for="item in channelList"  :key="item.id" :title="item.name">
      <!-- 抽出去 -->
      <List :channel-id="channelId"/>
    </van-tab>
  </van-tabs>
</template>